<template>
	<view class="appl-list">
		<!-- 搜索框 -->
		<view class="apply-search" v-if="source != ''">
			<u-search v-model="keyword" @search="search" :clearabled="clearabled" placeholder="请输入需要检索的申请人姓名"
			:show-action="showAction" @clear="clear"></u-search>
		</view>
		<!-- tab -->
		<view class="u-tabs-box">
			<u-tabs-swiper activeColor="#2045FC" ref="tabs" :list="tabList" :current="current" @change="tabChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<!-- 列表 -->
		<view class="">
			<block v-if="applyList.length > 0">
				<view class="data-list mt10 bg-white" v-for="(item, index) in applyList" @click="goDetail" :data-id="item.id">
					<view class="list-title row-between">
						<view class="row">
							<view class="mr10">
								<u-icon name="account-fill" color="#2045FC" size="30"></u-icon>
							</view>
							<view >
								<text class="bold">申请人：</text>
								<text>{{item.realname}}</text>
							</view>
						</view>
						 <view class="">
						 	<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
						 </view>
					</view>
					<view class="mt10">
						<text class="bold">申请部门：</text>
						<text>{{item.bumen}}</text>
					</view>
					<view class="mt10 u-line-2">
						<text class="bold">申请内容：</text>
						<text class="muted">{{item.content}}</text>
					</view>
					
					<u-gap bg-color="#EEEEEE" height="2" margin-top="20" margin-bottom="20"></u-gap>
					
					<view class="row-between">
						<view class="">
							<text class="bold">申请时间：</text>
							<text class="muted">{{item.createtime}}</text>
						</view>
						<view v-if="source == 'apply'">
							<u-image width="114rpx" height="55rpx" src="../../static/icon/apply-approval.png" v-if="item.state == 0"></u-image>
							<u-image width="114rpx" height="55rpx" src="../../static/icon/apply-passed.png" v-if="item.state == 1"></u-image>
							<u-image width="114rpx" height="55rpx" src="../../static/icon/apply-rejected.png" v-if="item.state == 2"></u-image>
						</view>
						<view v-else>
							<u-image width="114rpx" height="55rpx" src="../../static/icon/apply-approval.png" v-if="item.status == 0"></u-image>
							<u-image width="114rpx" height="55rpx" src="../../static/icon/apply-passed.png" v-if="item.status == 1"></u-image>
							<u-image width="114rpx" height="55rpx" src="../../static/icon/apply-rejected.png" v-if="item.status == 2"></u-image>
						</view>
					</view>
				</view>
				
				<u-loadmore :status="status" />
			</block>
			<block v-else>
				<u-empty text="当月暂无数据" mode="list" margin-top="80"></u-empty>
			</block>
			
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			status: 'loadmore',
			page: 1,
			limit: 0,
			isLoading: false,
			
			tabList: [{
				name: '审批中'
			},{
				name: '已通过'
			},{
				name: '已拒绝'
			}],
			current: 0,
			clearabled: true,
			showAction: false,
			source: '',
			
			state: 0,
			applyList: [],
			keyword: ''
		};
	},
	onLoad(options) {
		if(options.type == 'apply') {
			this.source = options.type;
			
			this.getApplyListFun();
		} else {
			uni.setNavigationBarTitle({
				title:'历史记录'
			})
			this.getListFun();
		}
	},
	onReachBottom() {
		if(this.isLoading) return ;
		this.status = 'loading';
		this.page = ++ this.page;
		setTimeout(() => {
			this.getListFun();
		}, 2000)
	},
	onShow() {
		if(uni.getStorageSync('refresh_apply_list') == 'refresh') {
			uni.setStorageSync('refresh_apply_list', '')
			this.onRefresh();
		}
	},
	methods: {
		getListFun: function() {
			let post_params = {
				limit: 15,
				page: this.page,
				status: this.state,
			};
			this.$u.post('/api/review/userReviewList', post_params).then(res => {
				let datalist = res.list;
				let _limit = res.limit;

				if (datalist.length < _limit) {
					this.status = 'nomore';
					this.isLoading = true;
				}
				this.applyList = this.applyList.concat(datalist);
				this.limit = _limit;
			});
		},
		getApplyListFun: function() {
			let post_params = {
				limit: 15,
				page: this.page,
				state: this.state,
				keyword: this.keyword,
			};
			this.$u.post('/api/review/reviewrenList', post_params).then(res => {
				let datalist = res.list;
				let _limit = res.limit;
		
				if (datalist.length < _limit) {
					this.status = 'nomore';
					this.isLoading = true;
				}
				this.applyList = this.applyList.concat(datalist);
				this.limit = _limit;
			});
		},
		// tab栏切换
		tabChange(index) {
			this.current = index;
			this.state = index;
			this.onRefresh();
		},
		onRefresh() {
			this.isLoading = false
			this.page = 1
			this.applyList = []
			this.status = 'loadmore'
			
			if(this.source == 'apply') {
				this.getApplyListFun();
			} else {
				this.getListFun();
			}
		},
		
		goDetail: function(e) {
			let _id = e.currentTarget.dataset.id;
			
			uni.navigateTo({
				url: "/pages/finance/applyDetail?id="+_id
			})
		},
		
		search(value) {
			this.keyword = value;
			this.onRefresh();
			console.log(value);
		},
	}
};
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}
	.appl-list {
		.apply-search {
			background-color: #2165F7;
			padding: 30rpx;
		}
		
		.data-list {
			border-radius: 15rpx;
			padding: 30rpx;
		}
	}
</style>
